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Introduction 


The continuous and rapid development in the field of information and 
communication technology imposes requirements for sophisticated methods of the 
educational process to keep up with the successive technological developments. 

It is what led us to adopt new instructional entrances designed to achieve the 
goals, philosophy and visions contained in the document of computer and information 
technology that reflects the criteria and indicators for the subject for second year 
secondary that had been prepared in the framework of a matrix of the long relay at 
various stages of study. 

The curriculum is designed to develop self—mail and collaborative thinking skills 
and different types of students through cooperation in the implementation of projects 
to design and create interactive Web site "Illustrated dictionary terms." 

The idea of the project depends on the creation of a model program whose pages 
are designed by using (Expression Web), and the language of HTML coding, This 
project includes databases created by using MySQL program. 

We deal with databases through templates that were written in PHP programming 
language)). They are open Source; you can copy and use them in the establishment of 
the site pages and understanding and the developing of any code you want to 
implement. 

The book also includes pictures of the actual application interfaces executing the 
project, to clarify all the action steps, and simplify the concepts of learners, through 
activities and exercises comprising its operation in the dedicated book. 

Finally, this book is keen to develop various thinking skills and life skills for using 
ICT through carrying out projects that give students opportunities to employ what they 


are studying in their working lives. 


(God bless) 


Staff 


Table of contents 


subjects 


Unit one: Basics of Web Site Design 


The first topic : Cybernetic Entrance of the Project. 


The second topic: Planning the project site of "Illustrated 


Dictionary of Computer Terms. 


Second Unit : Requirements and production stages of the project 


The First topic: Design Web Site Pages. 


The Second topic: Create a Database. 


Unit 3: Creating site pages of “Illustrated Dictionary of computer terms”. 


First topic: The PHP & HTML languages and applications of 
designing web sites. 


The second topic: Transactions and conditional sentences in the 
languagePHP. 


The third topic: "Add_Term.php" page. 


The objectives of the book of information and communication 
technology for secondary two: 

< Know some of the concepts of operations related to infrastructure 
for computer systems, databases, programming languages of 
creating Web pages, and secure web sites, etc. ........ 

< Know some basic concepts and processes related to applications 
and services of information and communication technology. 

<4 Understand some aspects of intellectual security (human and moral 
and social) and the security of information related to the use of 
information and communication technology. 

<4 Use production technology tools (HTML & PHP & SQL ....) in the 
support and development of education. 

<4 Produce the project of ‘Illustrated Dictionary of computer terms" 
using the processes and programs and technological tools. 

< Employ technological tools of communication in the exchange of 
content, communication and interact and cooperate with others to 


support learning 


< The use of technological tools and resources in dealing with 


information and data, electronic processing and evaluating and 


reporting the results. 


Unit 1: Basics of Web Site Design 


Unit one 
Basics of Web Site Design 


By the end of the unit, it is expected that the student 


will be able to: 


1- show some advanced scientific concepts and terms 
related to the computer. 

2- employ computer programs in the implementation of 
learning tasks. 

3- employ network of Internet services in the teaching and 
learning processes. 

4- practise searches for all forms of electronic information 
on the computers and networks reliable in solving the 


problem of information. 
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Introduction 


Previously, in the computer decision of the first grade secondary, we had a 
_ lot of Knowledge and various skills through the production of "mail Atlas Arab" 
project. To continue what we started, you can set up more diverse projects in 
various areas of study and life. We will sail with you in a virtual world that is 
open to achieve pleasure, benefit and creativity while designing and creating a 
Web "Illustrated Dictionary of computer terms" site using free programming 
| languages and open source applications which are the most prevalent in 
major global companies and institutions specialized in the field of information 


and communication technology. 


The project of producing a site of "Dictionary Illustrated computer terms' 
_ serves as a model for General Dictionary terms through which you can enter 
all school subject terminology, and allows you to search for any term and 
display what it's intended for, and its image quickly and easily, in addition to 


the possibility to modify or delete it. 


bay, 
| Tg 
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The first topic 
Cybernetic Entrance of the 


Project 


Learning Outcomes: 


By the end of the topic students are expected to be able to: 


= 
1 


recognize some basic concepts and terminology associated with 


creating a Web site dealing with databases. 


N 
i 


distinguishes static web and dynamic web pages. 


& 
i 


ractise preparing computer operations to become a SERVER. 


4- recognize packs of programmes and web applications. 
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concepts that we are going to use. 


1- Freeware Programs 


They are the programs whose owner' The owner of the intellectual property 
right" allows others to use them free of charge or with written permission from 
him. 


2- Open Source Programs 


They are the programs and published applications that give users access 
to the code, the possibility to modify, develop it in the light of the needs of its 


developers, and republish or use it after the amendment. 


3- Static Web Page 


It is an Information page that is displayed through one of the Internet browsers. 
It can be saved along .htm, .html page. It displays various types of data from 
text, numbers, images, and video tables and links ... etc.,. These data are 
accompanied by some effects through which we needn't conduct a treatment to 


page content 
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Note the 
extension 
of the 


Figure (1) Static Web Page 


4- Dynamic Web Page 


It is an information page available on the Internet. It can be written in PHP 
or ASP.ne. It can display different types of data, and be made available 
through an address to the content of the page, such as restoring a value or 


displaying a message or an output. 


Dynamic Web page contains the code executed on the server, for example: 


e Implementation of a particular action based on the input process for 
example a user name and a password. 


e The page contains the code to deal with a database at the server. 


Sometimes you can see the page type (static and dynamic) of extension 


available in the URL 
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= http://portal.moe.gov.eg/AboutMinistry/Departments/ecd/Pages/Default.aspx 


Note 
extension 
ASPX page 
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Figure (2) Dynamic web page 
5- Server: 
The term is intended to two different meanings: 


Hardware server which is the most high powerfull computer network 


Software server which is as a task or role run in the network. 


The first: 
It's the computer Hardware Server in a computer network. It is a device 


that has high technical specifications from the rest of network devices. It 


controls the rest of the network devices and through which the permissions 


of computer network users are determined by running the Server system. 
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The latter: 
It is intended for the role of the computer in the computer 


network through Software, for example : 


Web Server: means the device on which the computer Web 
site pages are stored. 


Print Server: means computer printer connected to it, and 
controls the print management operations issued by any 


other device in the network. 


E-mail server: is intended to store the computer device e-mail 
messages and controls the management of all e-mail processes and 


made them available for users of e-mail. 


6- Script: 
It is a sequence of instructions or code written in one of Web pages 
languages cutomized for web pages to perform a task or to process some of 


the data, including: 
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Server Side Languages Client Side Languages 


For Example: For Example: 


PHP Java Script 
ASP.net VB Script 


This code is run inside the 


This code is run inside the 


browser to a client's "Run at 


browser to a server's "Run at 


server Client 


"Run at Server Run at Client 


Note: For example 
“ Make sure not to leave empty—user name field. It can be 
implemented through: 
(Run at Client) Java script code 


Æ The verification code that the user name and password are correct 


and in the database server is implemented through: 
.(Run at Server) ASP and PHP code 


7- HTML" Hyper Text Markup Language:" 


It's the language used to create the Static Web Page. This page can be 
saved along .htm, and pisplayed through one of the Internet browsers. 


8- The language of PHP "Personal Home Page" 


It's one of the specialized languages in developing dynamic web sites. It's 
a free open source language characterized by ease, speed, and operates the 
Server Side Language. Its own code can be included within the HTML code, and 


can easily connect different data bases safely. 
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The pages that contain PHP extension, PHP code are stored. To 
implement the code, we need to make some modifications needed to make 
the PC Server device using Apache Server program. 

Any programming language needs an assistant program used to type 
the code. Among the most famous programs creating web pages in PHP 


language: 


W aptana 


Aptana Studio 3 


Komodo Edit 


Komodo 
Edit 


Expression 


Microsoft 


Expression Vvet 


web 
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& THE FREE HTML EDITOR 


Relesve Windows 


Coffee Cup Free 
HTML Editor 


Website Name 


Figure (3): Some applications used to create Web pages 


9- Apache Server: 


| The program is used with Server devices or simulates your personal 

computer to act as Server device so that it can translate the written code 
| language PHP, which makes it easier for the developers of web sites to test 
web pages locally on Local computer before hosting it to the host server to be 


published on the Internet. 


10- Publishing Web Site: 


| When you create a Web site, you need to test its pages and display 
them on an internet browser before it's available to visit on the internet. There 


_ are two ways to publish a site: 


| The first: 


Localhost 


Where the site is displayed on our computer or ina LAN. 
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The second : 


Publishing Web Site 


Where the web site is uploaded to the server. This server is called' web server 


| [which provides web hosting service’ That allows" users to visit the site through 


the web site address or URL "Uniform Resource Locator’, for example " the site 


of the Ministry of Education." 'www.emoe.org.eg.' 


11- SQL "Structured Query Language:" 


It's a programming language used in all operations of database 
management starting from creating the database and dealing with the data 
stored in tables that make up the database by writing simple sentences 


(orders) that allow you to carry out operations: 


€ Inserting new data (INSERT). 

@ Displaying previously stored data by (SELECT). 
Editing these data (UPDATE). 

€ Deleting these data (DELETE). 


12- MySQL Server: 


It's one of the applications of RDBMS "Relational Data Base 


Management System." 
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13- " Web Server Packages”: 


Web applications packages mainly contain: 


@ Installing web server (Apache Server). 
@ Installing database management system (MySQL). 
On the Internet, there are free Web applications packages that can be 


installed, for example: 


1- Web applications package LAMP (Linux - Apache - MySQL — PHP). 
It includes Web server software (Apache Server), the application of MySQL 
database, and PHP programming language compiler and run on the Linux 


operating system. 


2—- Web applications package WAMP (Windows - Apache - MySQL - PHP). 
It includes Apache Server software, the application of MySQL database, 
and scripting language compiler "PHP" and runs on the Windows operating 


system. 


3- Web applications package MAMP (PHP - MySQL - Apache ~ Mac) 


(Mac-Apache— MySQL-PHP) 
It includes Apache Server software, the application of MySQL database, 


and scripting language interpreter PHP and runs on Mac operating system. 


4- Web applications package (XAMPP) "X-os, Apache, MySQL, PHP, Perl’ 
It includes a Web server (Apache Server), the application of MySQL 
database software, compiler and programming language PHP and Perl 


programming language that run on any operating system. 
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Note: 
The essential difference between the previous web 


applications packages is the operating system you are working 
with. 


14- Session: 


It's a way to store information about the user (visitor of the website) in 
order to make it available for use across the pages of the site, such as: (User 
Name, Password, some general and personal data, .... etc). The user may need 
to register when he visits the internet site to enter both: (User Name & Password 
.This is done by opening "Session" in memory as a variable that receives the user 
name and password that was entered in the registration page. The the site 
developer allows this user to visit all site pages or not, according to the specific 


condition / conditions. 


Practise (1) 


Basic Concepts" in activity 
book Page (7) 
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The second topic 
Planning the Project Site 


"Illustrated Dictionary of Computer Terms: 


Learning outcomes: 


By the end of the unit, it is expected that the student will be 


able to: 
1- determine required tasks to create a web site. 
2- Plan the main page of a web site. 
3- Load XAMPP program to run MySQL and Apache 


applications. 
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Aim of project 


Designing and creating site of "Illustrated Dictionary of computer terms 


by using free or open source programs and applications. 


The importance of the project 


The importance of the project lies in making you practise writing your PHP 
code of dealing with MySQL through web site pages. 
Thus, you can cosidser it a model to apply to create new varios sites with 


various uses after performing the required modifications. 


Determine the tasks to be implemented in creating the site 


of, ‘Illustrated Dictionary of computer terms': 


Æ Configuring the suitable environment for crearting a site. 

Æ Creating database fror saving the data of terms dictioinary that are 
inserted or modified through web pages. 

Æ Designibg the main page 

Æ Adding a term in Arabic and English, term scientific definition and 
a picture referring to a term and saving it in database. 

Æ Searching for a term in database. 

Æ Deleting a term in database 

Æ Modifying a term data in database. 


Æ Providing the required help on how to deal with the site. 
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The following screen represents a aproposal of the main 


| page of the site we are going to create: 


(€) http://localhost/dictionary/ Py? peel! viala ag 
A 


Do you have 
other 
proposals? 


Discuss your proposals and 


how to excute them with your 


| teacher and classmates: 


Computer & Information and Communication Technology 
Second year secondary A 


Unit 1: Basics of Web Site Design 


Measures to create a Web site 


Firstly: Configure the suitable environment to create 


websites 


In order to set the necessary techniques to ensure running the site, and these 


settings and techniques that must be taken into account are: 


(1) Selecting the programs which will be used in creating the project and 
installed on the computer . 

(2) selecting how to save web pages information project files on the computer 
"server", and the possibility of displaing to one of the Internet browser programs, 
and sving these pages in the form of files on a computer "server',using one of the 


following options: 


(A) We can book a site on the 'Host Server' with charge. 


(B) We can book a site onone of the free hosting servers 


free of charge. 
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(C) 


(C) Publish the site locally on your computer 


"Localhost". We will select this option in the production of 


‘Illustrated Dictionary of computer terms' project. 


Important note: 
All files of the site must be put in one folder containing 
subfolders includeing single-type files together. File names 


must be in brief and expressing their content in English. 


(3) Preparing your computer to act as a server to host your site "Local Host: 


When you create a Web site software, developers need to configure the 
appropriate environment for the establishing a website: "Illustrated Dictionary of 
computer terms, "This requires making your computer act as a Server, using 
Apache Server program, which translates the code written in language PHP 


language "Personal Home Pages." 
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| Æ To test the site and validate it locally befe 
| 

| \\ it is published on the Internet just like what 
| big companies do, you need to create your 


device to act as a server device to be ready to 


host the site. 
@ Examples of the programs used for this 
purpose: "XAMPP" program which is one of 
the best programs to set up your computer 


"Local Host’. It is easy and you can deal with 


ySQL databases. 


| — Activity (1) 
Installing "XAMPP Program ". 
Under the supervision of teacher, follow the 
steps to install XAMPP program described in the 
| Activity book (\ ^) 
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Secondly, executing the "Illustrated Dictionary site 


computer terms through three stages, namely: 


(1) stage of creating a database: 


Store the data that is entered or displayed on the web site pages, 


through a database management programs such as: Access - 
MySQL.... etc. 


(2) Stage of creating a page / static Web site 


Through one of the following options: 

HTML "Hyper Text Markup Language 

Using "ready to-run programs" or applications, such as Application 
Program: Expression Web. 


Note: 


The site created by using an application or HTML contains static 


Web pages includeing various images of data and information. 
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(3) Stage of converting static Web pages into dynamic 
“Dynamic Web page: 


Where the contents of the static Web page and the modification in the associated 
database by the user who is permitted to handle and modify the content, by 
writing code in one of the programming languages such as: PHP within the 


HTML code. 


The site pages are displayed using one of the following Internet browsers: 


Internet Explorer — Google Chrome - Firefox, etc.. 


Activity (2) 
Run "XAMPP" Program 


Under the supervision of your teacher, 


follow the steps outlined in the book of 


activities and exercises Page 15 to run 


XAMPP program in the right way 
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Dear 
students 


To create a project site "Illustrated Dictionary of 
computer terms", we should do the following: 


We should: 


1- create "Static Pages" through the application of "Expression Web" 
through which we can display "HTML" code . 

2- process the contents of the static pages "to become Dynamic 
pages, by adding code language "PHP" within the "HTML code." 

3- run XAMPP program that does the following: 
© Running a Apache program that makes the device acts as a server. 


% Running MySQL program that enable you to deal with 
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Second Unit 


Requirements and production stages of 


the project 
By the end of the unit, it is expected students will be 


able to: 


l1- suggest simple projects to employ the applications and information and 
communication technology services in the fields of study and life. 

2- employ information and communication technology applications in exchange 
projects’ tasks. 

3- employ some of desktop programs and applications (Worksheets — Data 
Bases..) in producing specific tasks within educational projects. 

4- employ several programs to solve educational and life problems. 


5- design suitable data base for his project. 


6- practise PHP programming skills. 


7- use some of Internet applications in the implementation of his project. 
8- design interactive Web pages for his project. 
| 9- link the interactive Web pages with Databases. 


| 10- produce a project using advanced Internet applications. 
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11- employ advanced databases (MySQL) in designing web sites to solve 
life problem. 

12- Use PHP programming language in producing software and web site to 
express his/her thoughts. 

13- evaluate web sites and information resources in terms of accuracy and 


credibility in the light of specific criteria. 
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Dear 
student 


Producing the “Computer Terminology 
Dictionary” project passesthrough a number of 
stages as follows: 


Stage (1) | 
Designing Web Pages 
— 
7 
Stage (2) | 


Creating Database Tabels 
_] L 


Stage (3) 
Creating Web Site Pages 


Each Stage contains several skills and through your study and 
practice, you can implement the project. 
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The First Topic 


Design Web Pages 


Learning outcomes 


By the end the topic, students are expected to be able to: 
1- design the home web page for the Computer Terminology 
Dictionary site. 
2- determine the necessary navigation links between pages of 
the site. 
3- discuss with his collogues several proposals for the design 


of the project pages. 
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Design web pages stage 


This is the first stage of the implementation of the project, in which the 
project’ web pages, the name of each page, the purpose, and its content 
will be determined. Also we will define a proposal for designing the main 
page components and the Hyperlinks used in web pages navigation and 
return back to home page. 

Good design of the site before the beginning of creation, it saves time 


and effort, also helps in producing special and professional site. 


The following figure shows a proposal for designing “Photographer Computer 


Terminology” Dictionary site’ pages. 


Add_Term.php 


Search_Term.php Edit_Term.php 


Figure (5) scheme of “Photographer Computer Terminology” Dictionary 


site’ pages. 
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The following table shows “Photographer Computer Terminology” Dictionary site 


pages and its purpose and description. 


Home Page To activate It represents the 


the links start page that 
Index.php 
which can appears when the 
navigate user downloads the 
between the site, and by which 
site web they can move to 
pages the rest of the 


pages of the site. 


Data Base To achieve This page does not 
Connection | connect to the | 2PPear in front of the 


user, but it has been 
Page database, 


separated in order to 
where it will mle Ode 


Connection.p limit typing code to one 


hp be retrieved -line code achieves To connect 


before dealing connect to the Database 


with the data. database at the 
beginning of each page 
rather than repeat the 
entire contact database 


code. 
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Site Header 


Page 


Header.php 


Adding Term 


Page 


Add_Term.ph 


p 


To show 
Banner 
picture and 
Hyperlinks 
Which they 
take us to all 
pages of the 
site where 
they are 
called at the 
beginning of 


each page. 


To add term 
and all its 


data in the 


terminology 
database 


table. 


This page contains 
fixed parts that 
need to be shown 
in all pages of the 
site, it so have been 
separated ina 
separate page, and 
is retrieved through 
one line code 
writing at the 
beginning of each 


page. 


Independent Page, in 
which we write code 
to call the page 
header.php and 
another code to call 
page connection.php 
so that it can adda 
new record to the 


database. 
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Searching 


Term Page 


Search_Term. 


php 


Editing Term 


Page 


Edit_Term.ph 


p 


Deleting Term 


Page 


Del_Term.php 
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To search 

term in the 
terminology 

database 


table. 


To edit or 
update term 
data in the 
terminology 

database 


table. 


To remove or 
delete term data 
from the 
terminology 


database table. 


Independent Page, 
in which we write 
code to call the 
page header.php 
and another code to 
call page 
connection.php so 
that it can search 
for a term in the 


database. 


When you make a 
modification term 
data we choose the 
term you want to 
modify it, and then 
make the necessary 


adjustment and save. 


You can delete a 
term that was 


chosen. 
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Helping Page To view Usually what we 
information find in most of the 

Help.php 

about the site sites where the 


and its About Us page 


displays information 


controllers. 
about the location, 


the methods of 
communication 
such as phone , 
address, e-mail , 
address pages on 
social networking 


sites ... etc. 
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1. Separate the image Banner and Hyperlinks in a separate page 
that is called in The beginning of each page . 

2. Separate connect code to the database in a separate page that 
is called at the beginning of each page. 

3. Image that appears at the beginning of each page called 
Banner 

4. All Hyperlinks that we use to navigate between pages of the 
site are: 

( Main — Add term - Search term -Edit - Delete - Help ), 

This requires repeat the code for image and links to all pages of 
the site which represents a significant burden and should want to 
avoid a repeat, by separating them on one page that is called in 


the rest of the pages. 


There are many applications or ready-made programs in which we can create 
a project-specific web pages quickly and easily, that is what we will be 


implemented in the following stages. 


After selecting the site pages, we have to determine the structural 


architecture of the database, 


Which will be explained in the second stage of the project ( next topic ) 
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Practice (1) 
"Design a Scheme of site pages" 
Book of activities and exercises Page 23 


Practice (2) 
Design a Scheme of "Photographer 
Computer Terminology” Dictionary site 
pages 
Book of activities and exercises Page 25 
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The Second Topic 


Create a Database 


Learning outcomes 


At the end the topic, students are expected to be able to: 


1 


2- 


recognize some basic concepts related to databases. 

create a database of the project “Photographer Computer 
Terminology Dictionary”. 

practice linking databases operations. 

classify the relations in databases. 

cooperate with his colleagues in the creation of database 


tables. 
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Create database 


tables Stage 


The second stage in the construction phase of the “Photographer 
Computer Terminology Dictionary” project database, and before starting, must 
be identified on some of the basic concepts of databases. 


1- Database: 


The database is a store or save a set of structured data associated with 
a particular subject in order to restore it to make decisions. The Relational 
Database is one of the types of databases that rely on the division of the data 
in Tables with determining relationships between these tables. 


2- Tables: 


Table represents infrastructure or the main component of the database, 
and consists of Records and Fields such as: data table for student or an 


employee or product ... etc . 


Fields 


(Columns) 


Governorate Birth date 


: o so | 
Rows olsam | Femate[ ome | spans | 
ama [Feneie| caro | sapo | 

wae | oea | nso | 
Corana | oms [ 


Figure (6) Example for Student table 


Records 
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From the previous table, we conclude the following 
concepts : 


Records: 


A row of data table containing all the data for only one person or one case, 
and the record consists of several data fields (student or an employee or a 


particular product). 


Fields: 


Field is the infrastructure that makes up the data table, any column in a table 


is a field, and the field contains only one statement for each record of the table 
records. 


Each field has many of properties including: 

Æ Field Name: Such as Student’s name, Governorate, Salary, Quantity...etc 

Æ Field Data Type: may be : 
< String: Such as Name or Address.. 
< Numeric: Such as Degree or Salary.. 
<4  Date:Such as Date of birth ...and so on. 

Æ Field Size : 

It is the number of digits or characters in the case of the text field, or select 


the type of numbers entered in the case of the numeric field (Integer - 


contains a Decimal — ....... etc) ; 


It is worth mentioning that: 


Æ You can create database that consists of only one table containing all the 


necessary fields and in this case the table is called "Flat Table". 
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“@ We usually separate the fields that share a common factor and put them in 
a single table, and thus database contains more than one table. 
@ This matter requires creating relations between the database tables to 


each other, so as to avoid duplication of data or fields, and in this 


case the database is called Relational Database. 


| Jo ensure the success of the linking process between database 
| tables, you must achieve the following: 


(1) Seta "Primary Key" 


| Set a "Primary Key" field for each table, and that by one of two ways: 


e Select a field from the table fields: the requirement will not be repeated 
any statement in this field at all, even with the huge volume of data. 
Or 


e Add a new field: it is set or allocated as a Primary key field. 


Practice (3) 


“The basic concepts of databases” 


Activity book Page 26 
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Study the following table and discuss with your classmates and your 


teacher what considered. 


Student 

Gender Governorate Birth date Tel. No 
name 

Mohamed Male Cairo 1/1/2000 VENA 
Sama Female Giza 5/2/1 999 AVAAY 
Fatima Female Cairo 3/4/2002 rere 
Youssef Male Giza 11/5/2001 ototo 
Heba Female sharkia 6/7/1998 “01051 


And it is clear that the fields that can be repeated its data, are not applicable to 
be a primary key field, so you must add a new field to become the primary key 
for the table, such as the student serial number or the student ID, so devoted a 
special number to each student that characteristic his data for the rest of the 


table records. 


(2) Determine the types of relationships in databases 


Determine the types of relationships in databases, the concept of 
each type, and how you can link the two tables, which will be 


addressed in some detail. 


Types of relationships in databases 


First Type Second Type Third Type 
One to One One to Many Many to Many 
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First Type: One to One: 


A Relationship between two tables, where you can join a record in the 


first table with only one record of the second table, and vice versa. 


Example (‘) 


Student data table Student status table 
Date of | Nationali Grade/ 
St. no | Name Address | Tel. no St. ID Year | Status 
birth ty Class 
\ Hany | 1/1/2000 | Egyptian Cairo yyyyy r 2/1 yaa Pass 
y Aml 2/2/2001 | Egyptian Giza osu t 2/3 YAA Pass 
r Walid | 3/3/2002 | Egyptian Quina q4 AVY \ 2/5 YAAN Pass 
t Samar | 4/4/2003 | Egyptian | Aswan CONNG y 2/6 y.¥% | Remain 
PK ». (PK ) 


Figure (7) shows the head to head relationship between two tables 
Of the figure (7) Note: 


The joining between the two tables by one-to-one relationship is linking the 
primary key field in the first table "Student number' with the primary key field in 
the second table "Student ID', pay attention that the primary key fields in the two 
tables must be: 

(1) The same Data Type. 


(2) The same size. 
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Note: 


e Do not require to be the primary key fields in the two tables have the same 
name. 
The application of the database does linking the record of student Number 
(1) in the first table with the record of student ID (1) in the second table, and 
so on for the rest of the records even if the introduction of the records in the 
two tables in a different order, the important thing is the linking fields have 


identical content. 


For example, it can be concluded that student no (2) in the 


| classroom 2/6 and her school status is 'Remain'. 


Practice (4) 
“One To One” relation between two 
tables 
Book of activities and exercises Page 28 
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Example (2) 
Classes Table Teachers Table 
Leader Class | Class a Teacher | Teacher 
el. 
Teacher | Address | Code Address Name Code 
Number 
Code 
Foreign Primary 
KeyFK Primary KeyPK 


No duplicate 


| 3 KeyPK | 


Figure (8) shows the head to head relationship between two tables 

Of the figure (8), We note that identifies only one leader teachers for a 
class, which links the teacher code field (PK) in the table of 'teachers' with 
the foreign field leader teacher code (FK) in 'classes' table to be adjusted 


leading On Field Properties a non-repeatable "Index No Duplicate". 


Note: 
Called leader teacher code field (FK) a "Foreign Key", because it is not of the 


nature of the table and it is considered an outsider field. 


Practice (5) 
"One To One” relation between two 
tables 
Book of activities and exercises Page 29 
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Second Type: One to Many 


A Relationship between two tables so that you can join a record in the first 


table with numerous records in the second table and not vice versa. 


Example: 
Many Table One Table 
Cle 
Class School | Student Class Class Class 
Division 
No. Year Number Location Name No. 
\.‘ | Scientific Yet y First Floor First Yel 
¥. 1 | Scientific yoy £ Second Floor | Second Yad 
Foreign y.y | Literary YAN \ Third Floor | Third rey 
FK y+. | Scientific yey , 
Key Primary 
Y.\ | Literary Yaar o Primary 
Y.. | Scientific ved y KeyPK 
KeyPK 
y.\ | Literary yout 4 
1.1 | Literary yAn \. 
\.1 | Literary yaan \Y 


Figure (9) illustrates one to many relationships between “classes table” 
and “students table” 
Consider the previous figure and discuss with your colleagues the following : 


(Clarification with examples of records from tables) 


a 1. Are there more of students belong to the same 
class? 

2. Do one of the students belong to more than one 
class? 


3. What are the student's numbers in class 301? 


« 
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Note of figure (9) as follows: 


The relationship between the tables "Class" and "students" is one "to many 
relationship" in terms of class table, where we find that every record in the 
"Classes Table" is Linked with many of the records in the "Students table” that 
is, per class, there are many students while the student Linked to only one 


class. 


_%®To do link between the two tables in the one -many relationship should be 
added the primary key field in the table One(" classes table") to table 
Many('students table”), it is called in this case 'a foreign field" (Foreign Key) 


because it is not of the nature of the table, but it outsider field. 


In the foreign key field (the class number in students table), data can be 


repeated, and called Controlled redundancy. 


| © That each record in the "Classes Table" is associated with numerous records 


in the "students table". 


The application of the database linking every record in the head table One 
"classes" with students records that have the same class number in the 


foreign field in the table Many "students". 


Practice (6) 


Conclusion one -many relationship between two 


tables 
Book of activities and exercises Page 30 
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A Relationship between two tables where one or more rows in a table are 


associated with one or more rows in another table. 


Teachers Table Class Table 
Teacher | Teacher Fi Class Class Class 
Subject i i / Primary cae y h 
ame o. < ocation ame o. 
A ; KeyPK f - 

Computer | Ahmed Y \ First Floor First a) 
English Mona £ Second Floor | Second Yu 
Arabic Aml ` Third Floor Third |, Y.) 

cqa a gy È 
Math Omar Y o , 
Art Hanaa o pP pP : 
p” v4 Primary 
Sport Sherin ‘i Joining Table FA 
; y KeyPK 
SI Teacher No. Class No. <e 
N \ ye) 
Fields of class No. and 7 A 
teacher No. together a \ 
E \ t Yaj 
Composite key  \ i = 
£ 
In the joining / o re 
y ` 4 
table =, K = 


Figure (10) shows the many - many relationship between the 'class 


table” and the “teachers table” 
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Consider the previous figure and discuss with colleagues the 


following: (with illustrative examples of records from tables) 


1. Do more than one teacher teach in the same class? 
2. Does a teacher teach in more than one class? 
3. Select the teachers who are teaching in class No. 301? 


4. What classes that taught by the teacher's No. 5? 


Note of figure (10) as follows: 

w The relationship between the "Class table "and "Teachers table" is many — 
to-many relationship, where we find that every record in the "Class table" can be 
associated with many of the records in the "Teachers table", and any record in the 
"Teachers table " can be associated with numerous records in "Class table’, 
meaning that one class can be taught by more than a teacher, and the teacher 


can also be the one who teaches in more than one class. 


Subject Teacher Teacher Class Class Class 

Name No. Location Name No. 

Computer Ahmed Y First Floor First Ye 

English Mona f Second Floor | Second Ye 

Arabic Aml \ Third Floor Third rel 
Math Omar y 
Art Hanaa ° 
Sport Sherin 4 
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i) Before doing the link between the two tables in a relationship many — 


to-many should create a new table that contains the primary key field "Class 
number" of the “Class table”, and the primary key field "Teacher number" of 
the "Teachers table", and assign that two fields together is the composite 


primary key in the linking table. 


Teacher No. Class No. 
\ ad 
y yu) 
i yu) 
o Yai 
o yu) 
4 yu) 
y rm) 


©  Many-To-many relationship is a theoretical relationship of concepts of 


databases, and cannot be represented practically in database management 


programs such as Access - Oracle - MySQL ... etc. 


® So the relation was broken into two relationships: 


The first: one-to-many relationship between "Class table" and “linkage table” 
so that the head is a "Class table", and the parties (many) in terms of 
connectivity “linkage table”. 

The last: one-to-many relationship between "Teachers table" and “linkage 
table” so that the head is a "Teachers table", and the parties (many) in terms 


of connectivity “linkage table”. 
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From the above it is clear that: 

e Data cannot be duplicated in the primary key field in the "Class table '. 

e Data cannot be duplicated in the primary key field in the "Teachers table". 

e You cannot repeat the teacher No. and class No. together in the linkage 
table because they together represent a composite primary key as shown 
on he figure. 

e Each class in the "Class table" can be taught by many of the teachers, and 


each eacher can also teach in more than one class. 


Practice (7) 
Conclusion Many-to- Many relationship 
between two tables 
Activity book Page 32 


Using one of Database management system applications 


in creation of the database, such as: 


Oracle or MS Access or MySQL 
We will use the application MySQL where it is free application (Free Ware), an 
Open Source; it is allowed to deal with the huge amount of data used by 
major international companies, especially in the field of information technology 
such as: Google, Yahoo and Friendster. And for more information about some 


of the companies that use MySQL you can visit the following location: 
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http: //www.mysql.com/customers/ 


Typically the applications used in database management system 


include basic Objects such as: 

© Tables: through which we can create database tables containing records 
and fields, and the possibility of entering, displaying and modifying the 
data. 

% Queries: 
Query is a request for information from a database for the purpose of 
data or information in the tables, displays the required data, and through 
query can display some fields from a table or display some records from a 
table or more based on a certain condition ... etc. 
To create a “Photographer Computer Terminology” project 
database by using application MySQL, follow the procedures 


following activity: 


Activity (1) 
Create a database using MySQL 
Activity book Page 33 


This activity is a mentor that enables you under the supervision 
of your teacher creating of any other tables in the database 


depending on your needs by the following characteristics: 
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= 
Pull 
a 6 


Project database properties : 


Database Name: dbdictionary 

Data Table Name: Terms 
And includes a total number of five (5) fields, as 
shown in the following table: 


Table: Terms 
# Name Type Length values Index 
1 Id Integer 11 Primary 
2 Term VarChar 50 
3 Trans VarChar 500 
4 Defe VarChar 5000 
5 Picture VarChar 300 


Note: 


In the “Photographer Computer Terminology” project construction, it has 


been created database consists of one table to be simple. 


Activity (2) 


Data entry in table “terms” using MySQL 
Activity book Page 39 
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Unit 3 


Creating Site Pages of 


‘Illustrated Dictionary of Computer Terms". 


By the end of the unit students will be able to: 


. Employ some of the e-learning tools in the production of his project. 

. Employ information and communication technology applications in the 
construction of educational content. 

. Employ one of applications of creating website in linking Web site pages. 

. Employ appropriate applications in processing multimedia elements (audio 
— video—image...) 

. identify HTML language and PHP and its applications in web design. 

. practise dealing with electronic information skills (identifying — evaluating 

— selecting — organizing.) 

. employ electronic information sources associated with a specific project 

in the implementation of the project. 

. learn some of the transactions related to PHP language. 

. learn some of the concepts and formulas related to the IF and Switch 


statement. 
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First topic 
PHP&HTML languages and 


applications of designing web sites j4 


Learining Outcomes: 


By the end of the topic studentS will be able to: 


1- Practise steps of creating a site using the application Expression 
Web. 

2- know HTML markup language. 

3- create Web pages with HTML code. 

4- explain the main screen components of the program Expression 
Web. 

5- link between Web pages with code. 

6- earn the PHP programming language. 


7- employ Expression Web program in linking Web site pages. 
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Setup files and folders project procedures: 
1-Create a folder for the project named 'Dictionary' inside the 


folder htdocs. 


Before you begin creating web pages, we need to organize files of various 
types that will be displayed on the pages of the site, which should be in one 
folder, which contains subfolders for the classification of files that are 
displayed on the pages of the site, and they are categorized into a folder of 
image files and folder for video files ... etc., and thereby create a repository 


Information project. 


Notice: 
When you Install XAMPP, by default, this is done within a folder named XAMPP 


on the CD player C: and has a set of folders, including a folder named htdocs, 
and the project should create a folder named "Dictionary" inside htdocs folder then 


the track becomes as follows: 


It is the path that you will use to save the project files, and save subfolders 


of the site and publish them as a site on the (Server) Localhost. 


2-crteate web pages: 


Dear Student, remember that we are in the process of visualizing a 
proposal for the project, where we previously identified pages that 


will be created in the proposed site (location) pages, namely: 
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e Add term page: 


"Add_term.php' 


Which is used to add a new term. 


eSearch termPage: 


"Search_term.php'" 
The term used in the search for 


and view its data. 


eEdit term page: 


"Edit_term.php' 
Through which we can modify any 


statement of a particular term. 


eDelete term page: 


"Del_term. php" 
through which you can delete a 


certain term. 
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eHelp page: 
"Help.php'" 


Information on how to deal 


with the site "Illustrated 


Dictionary of Computer Terms. 


eConnection.phppage " to open a connection to the 


database on the server machine. 


e Header.php page contains the following: 
1. Banner that is displayed on all pages of the site. 


2. Hyperlinks Hyperlinks to all pages of the site. 


e Home " Index.phpdisplays site interface: 
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Due to the seriousness of the processes of the modification in the term 
data or delete it from the site, this authority has been granted to the 
user who is logged entry only, which will be implemented in the phase 
of securingthe site in the fifth unit of this book, and so the user who 
logged in should be logged out from the site, after the end of his/her 
interaction with the site "Illustrated Dictionary of Computer Terms'. 

Whatever the application used to create web pages is, it depends on the 
use of HTML coding language, so we address the most important 


information and basic skills in HTML coding language and application 


Expression Web, to help create the site pages. 


"Hyper Text Markup Language "HTML 


It's a coding language used to create Web pages that saved 
with the extension of the .htm or .html so that it can be displayed. Its 
code can be translated translate through one of the Web browser 
programs. 
And thus you can write HTML code using a word processing 
programs, such as: 
(MSWord, WordPad, Notepadand ....... ) 


Bearing the following in mind: 
The command written in HTML coding language is called Tag, it is 


possible to be written in capital or small lettes letters. 


t To write the code according to a specific figure as follows: 
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i <html> 
i <head> l 


; <Titlescte ya iaia olsie</Title> l 
l 


</head> 


l <body> 
l YI gaia le gaiu gil agad) i 
</body> l 

</html> ! 


Figure (11) illustrates the Structure of HTML 


Study the previous figure and try to deduce the 
characteristics of HTML markup language: 


WPT he characteristics ot HTML coding language: 


1. Tags commands in the markup language HTMLare placed between 
two brands<> 
2. Most of the Tags have a beginning or open <... .. > and an end or 


close<.. ... /> 


As follows: 
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| <Tag> 
| The text is affected by the command 


| </Tag> 


Figure (12) the general figure of the Tag in HTML markup language 


Notice the following: 


eEach tag has a certain task to perform. 


eSome tags don't have a close or an end such as <BR>. 


eSome Tags don't have properities that can be assigned at 


the beginning of the Tag. 


3. The code begins with <Html> and ends with </ Html> the following : 


is between them: 


<Head></Head> It is used to display information such 
as: a description of the site and the 


code writer and language ... etc. 


<Title></Title> It has a regard for writting the title of 
the web page and appears in the Title 
Bar of screen Internet browser is part 


of the Tag <Head>. 


<Body></Body> We Keep all types of information to 
be displayed on the Internet browser 
page of text and effects on which the 


photos, videos, audios, tables and 


links (.- etc) occur. 
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4. summary of what the main sections display of the HTML code: 


is m D 
<HTML> All page contents </ HTML> 
<HEAD> Page heading </ HEAD> 
<TITLE> Page title m EES 
<BODY> Page content </ BODY> 


Figure (13) Summary of the main sections of HTML 


© Save markup language HTML code: 


% To save the HTML code in a file you should bear in mind the 
following: 
1. Save the file in any HTML code name with the extension .htm or .html. 


2. A text file type TEXT, and you should use Notepad program because it 


saves the file in this type directly without seecting this. 


=x 


Fie Edit Search Help 


<HEAD> Save in: | E cte x] Bl Al cl 


<TITLE> 


</TITLE> 
</HEAD> 


<BODY> 
</BODY> 


</HTML> 


File name: | Traint htm 
Save as type: [Text Documents -| Cancel | 
Z 


= 
Figure (14) saving the structure of the written program in HTML Notepad 


_ © After saving the file with the previous specifications, it takes Internet 


browser code available on your coputer, such as: 
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InternetExplorerorGoogleChromeorMozillaFirefoxEtc... 


% A file icon in the ‘----- "! case of Internet Explorer. 
% Discuss the form of the file icon with your teacher and classmates in 


case there is more than an Internet browser on your computer. 


Activity (1) 


Creating a Web Page named Test1.html" using HTML code 


Under the supervision of your teacher follow the 


study activity code: 
<HTML> 
<Head> 
<Title> 
My First web Page 
</Title> 
</Head> 
<Body> 
gosleil y gS 
<p align = "Center"> 
<img src = "Egypt.jpg"> 
<H1> „æ les </hl> 
</p> 
kp align = "“right"> bl Gall </p> 
</Body> 
</HTML> 
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The following table contains an explanation of some of the HTML code used in 
the activity; discuss the parts of the code contained in the following table with 


your teacher and classmates: 


Code Explanation 

<Title> Adding webpage address 

My First Web Page 

</Title> 

<Body> Each text typed in the <Body> appears on the 


Web page, on the left as the default orientation 


for typing on the browser screen. 


<p align = 'Center'> CODE <P> A new paragraph, and align = "Center" 
feature means the alignment of the following text 
has been centered on the browser screen to close 


the Tag </ P>. 


<imgsrc = 'Egypt.jpg'> Img src means "Image Source" It's typed after the 
sign "=". It's the Path and name of the image file 
with the extension placed between double 


quotation marks. 


<H1> Long live Egypt </ H1> | H = "Head". It means that the text, followed by the 
title and shows the size of the line according to 
the number that follows the letter H from 1 to 6, 
where 1 refers to the largest font size and line 6 
refers to the smallest font size and so on. The 
words 'Long live Egypt’ is also in the middle of 


the line where <P> has not yet closed. 


>p align = 'right<' Typing a text on the web page-with right 


alignment. 
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Activity ( 2 ) 


Using HTML code to create web page with the name test2.html 


Under the supervision of your teacher, follow the 


instuctions given in your activity book 


My Second web 
</Title> 
</Head> 


<Body> 


auol l cla ol ao Iolo! 
<p align = "Right"> 
<img src = "“Egypt.jpg”™ 
height=50 width=100> 
w%l äzùioll </p> 
</Body> 


</HTML> 


Study the previous code, compared with the code in the previous 


activity, then discuss this with your teacher and classmates. 


ÀN Dear Student, You can create a Web 


page or modify it by using multiple 
Mu applications or software quickly and 


easily instead of typing HTML codes 
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Here are two ways to link between test].html and 


test2.htmlweb pages: 


Firstly, the link between web pages in HTML markup 


lanquage code. 


Dear student, after you create and test] .html test2.htm!l Web pages using 


HTML markup language, you need to edit the Web pages and connect 
them through a text or an image, which you can do by modifying the code 


in the HTML markup language. 


Activity (3) 
Linking Web pages with code of markup HTML 
language 


Under the supervision of your teacher follow the 


the instructions in workbook page (39) 
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Secondly: the link through one of the 
applications of creating Web sites 


Dear student, you can also modify the Web pages and connect 


them through text or image using the application of Expression 
Web. 


Expression Web can be loaded to create Web sites and pages 
through a user-friendly interface and simple application instead of 


typing HTML code as follows: 


r loading Expression Web program: 


e From the start menu, select the program Microsoft Expression Web 4 


as shown in the following figures: 


Program 


ansaryNew ea 


Ji Microsoft 


“| Microsoft Expression Web 4 


J Microsoft Expressi Expression Web 4 | | Program 
dJi Microsoft Expression Blend SDK 


code 


Figure ( 15 ) loading Expression Web 
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e The opening screen of the program is displayed whose most important 


onents are: 


[Bi Ccompp\htdocs\Dictionary - Microsoft Expression Web 4 Sor 


* x (SiteView 


Contents of ‘C: xampp htdocs Pictionary’ 


36B pho 
28 pho 
XS po 
25 po 
«B po 
XS php 
ue pho 
1B php 
26 pho 
1 po 
3x8 po 
28 pho 
z3 pho 
28 po 
18 po 


Figure (16) the main screen of the program Expression Web 
components. 


(1) MenuBar. 

(2) FolderList. 

(3) TagProperties. 

(4) WebSitecomponent. 

(5) Toolbox. 

(6) ApplyStyle. 

e The applications used to create Web sites and pages feature are 


characterized by (WYSIWYG) (' which Means: 'what you see is what you 


get.") 
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e We can display the code of the Web page HTML and modify it, for 


example, we can use the application to link Web pages through the 
toolbar by applying Hyperlink in a text or an image as a substitute to 


HTML code, which has already been explained: 


<a href ='The title we need to move to "> 


Text or image to be linked to the title 


< a> 


e This is clear through the following activity: 


Activity ( 4 ) | 


Linking Web pages using Expression Web progra 


Follow the instructions given in activity book P. 42 


Creatina the project site 


Before creating any page of a site, we must create a site for the project 


using Expression Web program, and then set up all the pages as 


planned. 
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Activity (5) 
"Create a project site using an application ; 


Expression Web" 


Follow the procedures in activity book page (47) 


Creating"Header.php" 


Design Split Code 


ine 25, Column 2 By Be mge My Br ssi 197x314 


Figure (17) 'Header.php' 


Study the previous figure, and select repeated parts on all pages of the site: 


This page contains all repeated parts of the site pages as shown in the 


previous image namely: 
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© The image at the beginning of each page is called the Banner. 


© The following texts: the main — the introduction of the term — search for 


the term — amendment — to delete the term — help. 


Notice : 


The previous texts are displayed on the screen browser just as 


words that aren't linked to the web pages; the aren't hyperlinks 


yet. 


In short, "Header.php" page aims to insert an image and then type 


some texts that are separated by spaces, as displayed by the following code 


window: 
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1 <html dir="rtl"> 

2 <head> 

3 <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
4 </head> 

5 


<body> 
<div> 
<img height='161' src='images/banner.jpg' width='1267' > 
</div> 
<div style="width: 1256px;text-align:right" > 
&nbsp; 
Ape 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Section ca 
&nbsp;&nbsp:;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 


Tiaa CF hall : 
&nbsp;&nbsp:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Second section 
Tiaa iia 


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 


| giaa Jor 
| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
| basla 
| 22 </div> 
| 23 </body> 
24 </html> 


Design Split Code 


Figure (18) Window "Header.php' 


In the code created we notice the following: 
| % The following Tag is used to create a section of the page as shown in 


Previous Figure: 


f l <div> " 
! | 
| i Code HTML of this section I 
| | l 
| I 
| </div> l 
| \ j 
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Í 


First section: 


It is related to inserting "banner' from 'images/banner.jpg with adusting the 


properties of height and width. 


<div> 


[Z] Untitied 1 (C:\xampp_new\htdocs\Dictionary\header! php) - Microsoft Expression Web 4 S] 


File Edit View t Format To t y Panels Window Help 


Inse ols Table Ste Dats View $ V ow 
-Be-Re8S- GE CHED Oo 
me 


Tag Properties SteView  headerlphp* = = Fv 


Tag Image 


src property image source 


| By By XHTMLIOT H8bytes| M- E- csszi 409x538~ 


Figure (19) Banner creates images and adjusts their characteristics 


Second section: 

Some properties, of the display and adjust the alignment of the right hand, 
were set then we typed the names of the pages of the site, leaving some 
spaces to &nbsp code (an abbreviation that means "Non Breakable Space’). It 


helps in leaving one space as shown" 
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<div style="width: 1256px;text-align:right" > 


&nbsp;&nbsp;&nbsp;&nbsp:&nbsp;&nbsp;&nbsp; | 
qia ge dall | 


&nbsp:;&nbsp;&nbsp;&nbsp:&nbsp;&nbsp;&nbsp; 
giaa iia l 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
giaa Jai 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
er) aay 

</div> 


Figure (20) shows the private pages of the site code part | 


You can also create a "Header.php" page with HTML code 
language or one of the applications of creating Web pages 
with the following code: 


1 <html dir="rtl"> 

2 <head> 

3 <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
4 </head> 


</div> 


eo. style="width: 1256px;text-align:right" > 
<a href="index.php">4j—i </a> 


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="add_term.php">&nbsp;@llaas 4du2) | 
</a>&nbsp;&nbsp;&nbsp;&nbsp:&nbsp:;&nbsp;&nbsp; 
<a href="search text.php">Cllnase ġe Gadl</g> 
&nbsp;&nbsp;&nbsp:&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="Del_Term.php"> Glance eida</g> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href}+"Edit_Term.php">Glaneas Juans 
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="Help.php">3s6 bess </a> | 
</div> 

</body> 

24 </html> 
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From the study of the previous HTML code, you notice the 
following: 


(1) | Section <div> has been opened and </ div> has been closed and the 
code of insert the image that we want to be Banner put between them 
to. Then code No. 1 on the Figure appears at the beginning of all 
pages of the site code. (No. | on the Figure). 

(2) The second section leads to the right of the coordination of the work of 
the alignment of all that followed, and even closing section, with Arabic 
texts making connections Hyperlink pages of the site. (No. 2 on the 
figure). 

(3) The following code: 


<a href = 'index.php'>main</a> 


Refers to: 


e The beginning of "Tag" 


<a href = 'index.php"> -the beginning of the code 
is the inclusion of a 
hyperlinkto the title, "the 
page name." 

-Which follows "=". 

- Which may be a file name 
or the name of a program 
or Web page name or 
Internet address, etc... 
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e The end of "Tag’: 


</a> hen we close the code with/>a.< 


(4) | nbsp& is an abbreviation that means "Non Breakable Space" It helps in 
leaving one space and six spaces after "main page" was written 6 times 
following each of them; 

(5) By the the same idea, you can repeat the previous code with the word 
"main" with "insert term ", "search for the term", "Edit term" , "Delete term", 
then the word "help" each of them canwork as a hyperlink. 


You can recall 'Header.php' with a simple instruction at the beginning of 


each page. 


You can create a header.php (page) using Expression Web program 


as follows: 


Insert image, and type some texts underneath, and make some 
formatting, to show up appropriately. 


Activity (6) 
"Creating a Page Header type PHP in the 


design screen". 


This is what you will do under the supervision 


ofyou your teacherin the activity book page (49) 
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We can linkeach below the Banner tothe pagerelated to it through the 


following activityactivity: 


Activity (7) 
"Creating hyperlinks to the pages of the 
site”. 

This is what you will do under the supervision 


ofyour teacherin the activity book page (50) 


Create a contact page Connection.php database 


We need to add a term or modify data, search for, or delete the term from 
the database in the'lllustrated Dictionary of computer terms" pages, which 
requires Opening a connection to the database so that we can conduct these 


operations on the database data. 


When you create a contact page databases, we need to deal with 
variables .Which we will shed light on before the creating the contact 


page databases: 


fe Variables and constants in the language of PHP: 


Dear Student, you've studied the concept of variables and 
constants in prepstage, and the concept is no different than previously 
studied, but let us take some of the spotlight from the perspective of 


PHP language. 
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A Variable is storeroom in the memory that has a name and typefor 
which we allocate a value to be stored in, and its value is changed 
during the course of the program. For example, if $ the Total variable 
is equal to 100, it can replace the value that was allocated with 


another in the language of PHP, with the following: 


$Total = 450; 


Notice the following: 


We announc the variable when it is used. 
Variable name begins with an.'$' 


Variable name consists of letters, numbers and sign '_" only, such as: 


$user_name - $A123 - $Password....etc. 
Variable name should express its content or what it refers to. 
Assignment sign is "=". 
Each sentence ends in PHP sign language; 


-To print any information on the browser screen use Print or Echo,as 


follows: 


- print $total; 
- OR echo (‘$total’); 
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-Echo Code can be used to assemble more than a fixed or variable on 


printing on the browser screen and then separate them by a dot"." . 
There is another version to print the value of the variable as 

shown in the following example: 

$name="Mohamed'; 

echo "my name is $name’; 

echo 'my name is $name’; 

echo 'my name is ' .$name; 
When you excute the previous code to have its result on the 


Internet browser screen as follows: 


my name is Mohamed 
my name is $name 
my name is Mohamed 
After executing of the previous code, we notice the following: 
e In the first printing, we printed the variable value when placed 
inside the "Double quotation." quotes 


e While the variable between the ‘Single quotation’ quotes was 


regarded as text printed as follows: my name is $ name. 


ein the third printing phrase,we used dot to print a literal 


series and the value of the variable. 
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You can review some types of variables in the language of 


PHP through the following table 


Type Kind of data Example 
String literal “Mohammad” 
Integer Whole number 123 
Double decimals 1.23 
Rational number 
Boolean True / False 
Or:Boolean 


¥ It is worth mentioning that we don't not display variable kind in the 
language PHP, but Apache displays (recognizes) the type of 
compiler through the valueallocated to the variable in the 
customization phrase. 

æ For example: You may know the type of any variable using the 


function "get' type ($ var); That follows CODE: 


<?php 

$U_name="mohamed'; // Variable equal to a literal value 
echogettype($U_name); // print variable type 
echo "<br />'; // move to next line 
echo "Welcome to PHP'; // Print a welcome message in the PHP 

language 

echo '<br >": // move to next line 
echogettype(Stest); // print another unselected variable type 
?> 
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We notice that: 

The output implementation of the code printing variable "$ U_name' on a page 
Internet browser is "String". Leave line and print a welcoming message 
"Welcome to PHP", then leave line and print any Null which means that the 


variable value is empty due to non—allocation of value to it. 


re PHP constants in the language: 


The constants are stores in memory bearing the name and type with an 
assigned fixed value that does not change throughout the implementation of 
the program, and can be defined by the following general formula: 
define (‘Constant Name’, Value); 
Where: 
o Constant Name refers to a hard name. 
o Value represents cutomized value to ...............2..20566. 


With a note that we do not put $ sign in front of a hard name when we 


use it, but it is defined. 


For example: 


define(‘name’, 'Mohamed’); 


echo('‘my name is: '. name); 


e We use a (.) In the second line of the code to link the two literal 
series. 

e We used the constant without the $ sign. 

e Define'is used to define constant. 


e Each line in PHP language ends with a semicolon;. 
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When you execute the previous code, its result on the Internet 
browser screen is as follows: 


my name is: Mohamed 


It is worth mentioning that the variables and constants are affected by the 
status of large or small letters( Case—Insensitive), and if you want the constant to 


be not sensitive to the case of letters, use the following formula: 


define(‘Constant Name’, Value, true); 


It's necessary to make sure that: 


(1) PHP code is written in accordance with the following: 
<?php 
PHP code to be executed 
?> 


(2) CODE <? PHP announces that the following code is a Script language 
PHP will be executed on the server machine through Apache Server. 


(3) Printing code on the browser screen in the language of PHP: 


Echo (" 


Content to be printed on the browser screen or any HTML Code 


HTML 


(4) each sentence in the language PHP must end with a semicolon Semi 
Colon"; " 

(5) Typing a comment in PHP code without being translated or executed 
before the sign."//" 

(6) As to type a note or a text of more than one line, you should type a 


comment or notes in full preceded by "/ *" At the end of the note put the mark."/ *" 
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r Dealing with the database data dictionary: 


After you create the database dbdictionary containing computer terms in 
the Terms table, we will deal with the spread sheet records through the site 
_ "Dictionary Illustrated terms" pages, where we can through the various pages, 
add the term to the database or search for the term or modify any statement 
in it or delete the term, and all these processes mainly need to create and 
open a connection between the database and the pages of the site, so before 
you execute any of these transactions, we will begin to create a page 
containing PHP code that you can connect to the database so that it can be 
called at the beginning of each Web based page one of the updates in the 
database. 

Site View _connection.php* » 
1 <?php 
$username="root"; 


$password=""; 


$database="dbdictionary"; 
$server="localhost"; 


$connect=mysql_connect("$server","$username",""$password"); 
if ($connect) 


{ 
$select=mysql_select_db("$database") or die(" SUL basti à AIS allie"): 


else 


t 
echo("SULal basti Slat! ai al"); 
3 


Figure (22) connect to the database code 
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Through considering the previous code, we notice the following: 
Æ The beginning of the code<?php 


“ There are four basic requirements to connect to the database: 


Server device — the user name - name and password - the database name. 


Notice: (user — name and password) 


Code Explanation 


‘'username="root$ MySQL user name is assigned to the 


variable $ username 


=$password:" The default password is assigbed to the 


variable $ 


and it should be changed as we will 


study in the fifth unit. 


2 Notice(database name) 


Explanation 


$database="dbdictionary'; The database name is 


assigned the variable $ 


database 


- Notice (server name ) 


= code = Explanation 


= $server="localhost'; - "localhost' of the database is 


assigned to the variable $ server 


Computer & Information and Communication Technology 
Second year secondary 


Unit 3: Creating Site Pages 
“Illustrated Dictionary of computer terms" 


$connect=mysql_connect('Sserver',"Susername",'S$password'); 


-The purpose of the previous code is to customize the result of executing 
mysql_connect that needs to be three data function: 


(Host server device name - and the name of the user - and password.) 
To the variable $connect, where it is the result of "True" if wevalidate the 
previous three data, or 'False' if it is not so, and to make sure that we 
use the following IF phrase: 

if (Sconnect) 
{ 
$select=mysql_select_db('$database') or die 


(There is a problem with the database’); 


} 
else 
{ 
Echo (‘We haven't been connected to the database’); 
} 


Notice the following: 


Asking about the condition value of the variable $ a connect, If the 
'True'" it is connecting to a $-called data Database through 


mysql select db function or message if there is a display issue, 


through 


Computer & Information and Communication Technology 
Second year secondary 


Unit 3: Creating Site Pages 
“Illustrated Dictionary of computer terms" 


The following code: 


Or die('There is a problem in the database.'); 


If the value of the variable $ a connect, 'False' ,it displays the message 
that follows else on the web page that he 'did not connect to the 


database". 


“ The end of the code?> 


Activity (8) 


"Create a contact page rules connect.php data" 


Activity Book page (52) 
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The second topic 
Transactions and conditional 


sentences in PHP language 


Learning outcomes: 


The end of the topic, thestudentwill be able to: 
1- distinguish between transactions Operator in the language of 
PHP. 
2- explain If conditional in the language of PHP. 
3- recognize inter Switch in the language of PHP. 
4- employ different formulas of "If" phrases & Switch in solving 


problems. 
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together the concept of Operators, where there are three types in the 


language of PHP, namely: 


Operators: 


(1) Mathematical Operators of two types (normal — other). 
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Operator Refers to Example Example outcome 
+ Addition 3+2 
- Subtraction 6-4 
* Multiplication 5*2 
/ division 8/2 
% Residual of 10 % 3 
division 


(2) There are other marhematical operators to the PPH 


language , for example: 


Operation Example Means 
+= $x +=5 $x = $x + 5 
-= $x -=5 $x=$x-5 
= $x *=5 $x = $x * 5 

= $x /= 5 $x = $x / 5 
% = $x % = 5 $x = $x % 5 
++ $x++ $x = $x + 1 
ae $x- $x = $x- 1 
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(3) compared operators: 
Operator {= > >= < <= 
Not Greater | Greater Than Less Less Than 
Refer to | Equal 
Equal Than Or Equal Than Or Equal 
(4) (5)Logical Operators : They are symbolized by the 


following table: 


Operator | (-4!) 
|| 
OR Or 
&& 
AND and 
1 Cans 


An example of the use of the outputs of the logical operators: 


X Y XI| Y X && Y 1X 
True True True True False 
True | False True False False 
False | True True False True 
False | False False False True 


IF Condition: 


Among the IF condition, by which software developers can develop a 


particular condition and test it. If the result of the condition is true, the 


program can implement of specific code, and if the result of the 


implementation of the condition is not properly, it can carried out 


another code. 
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We can use an IF statement in different ways depending 
on the program requirements, and perhaps the simplest 
forminh which IF statement is used in PHP language is: 


If (Logical Condition) 


{ 
Code to be executed if the output of condition is true 


} 


Where Logical Condition: 
Refers to the conditional expression such as: 


Degree> 50 or Age <6 or Name == 'Administrator' ... etc 


As can be seen from the above examples and what you ever 


study, it is noticed that: 


Condition compares two variables or variable and constantwhere we 
find one of the previous comparative operators between them. 

In this case, if the condition isture, wecanonly implement the code in 
brackets { }. 


For example: 
<?PHP 
$A='First'; 
If ($A=='First’) 
{ 
Echo "You first"; 
} 
?> 
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In the previopius example we notice that: 
- You first phrase: 


"Echo" will be typed on the browser screen if the value of the variable 


equal to $ A 'First. 
"=" -Sign in the code ($ A = 'First';) represents: 


Allocation operator, but the sign "==" with IF statmentrepresentsa logical 


OPERATOR (Equal). 
With Each sentence in the language PHP ends: 


Semicolon" ;' 


The following patern of the IF statement is the most common 


If (Logical Condition) 
{ 
True Saya) 5äa5 Ja) odiis ahal) 3981 


Else 


Jayéil) giai al 13) ohi ahali agi! 


} 
So, it is natural that any condition may havea'True' result "True" . Then 


we can implement the code of verification requirement only after IF 
directly, the condition may be the result of 'False" is executing the 


following code for Else only. 
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For example: 


<?PHP 
$A="Second"; 
If (SA=='First’) 
{ 
Echo "Jai cil’; 
} 
Else 
{ 
Echo ",,itt) cui; 
} 
?> 


In the previous examplewe notice that: 


- The phrase ""J Aj cil’: 
Will be typed only on the Internet browser page if the only value of the 
variable $ A is equal to 'First', otherwise it will print the words "ill cul" 
Because the $ A = "Second", the condition is not true, therefore, the result 
of the full implementation of printing the code is "pË cal", 

- The sign'=" in the code($A='First'; 
Represents the allocation operator but the sign'=="with the phrase If 


represents a logical operator. 


- IF Code is fully considered one sentence. 
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The following is the most complicated one for If statments 
(If - Else If) 


If (Logical Condition) 
{ 
gh) hidi giai 13) ohan ayal agal 
} 
Elseif (Logical Condition) 
{ 
gÜ hil gias Ja) oai ahali a 9S!) 


Ål Loyd) giai al 13) o Ai appall 2 gt 


We note that: 


The first IF statement is followed by condition, if it is tue, the following 
code is executed directly and If not, there is a second codition, if it is 


executed, the code that follows Elseif is met. 
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Example: 
<?PHP 
$X=5; 
If ($X<0) 
{ 
Echo "ql ait 
} 
Elseif ($X>0) 
{ 
Echo "wage aij 


Else 


Echo " jia (Solus af 


?> 


Because the $ X5 has achieved the second condition after Elseif and the 


words "positive number" will be displayedon the Internet browser Screen. 


Another style of the IF statemen. 

(Expression) ? If-True : If-False; 

The following example illustrates the use of the previous version, called InLine If: 
<?PHP 
$x = 1; // The variable is equal to 1 
$y = ($x = = 1) ?'One' : 'Two'; 

The value of $ variable x | sselected, if its value is equal to 1, 

the value of "One is stored" 


In the $ y variable and saves the value "Two" variable $ y. 
Print $y // the variable value 


2> 
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that in the previous example (:) Colon helped to write more than 


one sentence in one line 
It led to the same result, instead of using braces.{} 


Secondly: Switch statment 


Be used as one of the conditional phrases in the language of PHP, from 
which a number of conditions arechecked and each time the condition excutesa 


specific code, and the following example illustrates this: 


<?php 

$x=1; 
switch ( $x ) 
{ 


case 1: 
echo "əsl 3"; 
break; 

case 2: 
echo "oš" 
break; 


case 3: 
echo ' 
break; 


default: 
echo " 
break: 


Figure (23) PHP code illustrates the use of the switch conditional 


statement 
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By analyzing the following code we dind the following: 


e $x variable began with the value of 1, and then Switch statement 
is used to check the value of the variable $ x, where there are more than 
oneprobability 

o If the value of the variable is equal to 1 ( "case 1) "one" is typed and so 
on for the rest of the possibilities. In the last possibility if the value of the 
variable were not notequal to 1, 2 or 3 or less than this'no" is typed. 

o We can finish without doing anything by using "Exit", for example, in 
another case of Default, we can put the word Exi to Switch out of the 


sentence instead of printing 'no". 


Another formula for Switchstatment where " case "can take more than 


one value as the example below: 


<?php 


$a = 2; 
Switch ( $a ) 
f 

t 


Print in$a case 


case |: is equal to 1° 


or2or3 


case 2: 


case 3: 


echo ' 226 gi 2235) yi only’; 
break: 


default: 
echo ‘54! 24)"; 
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a = A SAS 


This image is equal to the following conditional if 


If($a--1 || $a-=2 || $a-= This operator means: or 


Echo ‘1 or 2 or 3’; 
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The third topic 
"Add_Term.php" page 


Learning outcomes 


By the end of this topic students will be able do: 


1- designe interface input page term. 


N 


- write PHP code to include My Page Header & Connection. 


oo 


- creates a page of "enter the term". 


A 
I 


ensure adding the term to the database. 
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(1)interface design input page term 


Through one of the applications used to create web pages (such as 


Expression Web) you can create a page with the following design entry term: 


and save them to the location on your computer folder. 


es 
Jill al 
INA 


File Edit View Insert Format Tools Table Site DətaView Panels Window Help 


R-Ee-PPCHKRBSSCBSCHRBER-Y XBR O- z keeg- 0j» <n 
3: on E Gs) Oo = = == EE By B~ O- nE 


Tag Properties "x SiteView Add Term.php" « Toolbox 


g E <body>| <form> 
<form> 
= Attributes 
o action jadd_term.php 
“af enctype —_|multpart/form-data 
F method [post 
wif acceptchar... i 
+ accesskey | 
Teg atomisele.. | 
(SF autocomplete | 
wa? dass | 
H contentedi... | 


GI 


Browse || 


tá Input Reset) 

tá Input (Submit) 
Input (Text) 
Label 

i Text Area 


È- E- w 267Ke| B- El- css2 


WB) apii ginas Jisa (C:\xampp\htdocs\Dictionary\Add_Term php) - Microsoft Expression Web 4 || je 


Right-to-left d 
mx 


Figure (25) Add_Term.php Page design screen 


For the implementation of the previous design in the design mode 


without writing code, we take into account the following: 
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e Writing input screen assress "add term". This address has been put in a 


separate section <div>by inserting a section of the Toolbox tools as follows: 


Toolbox 

~ HTML 

+ Tags 
<div> 


2] document 


© Inline Frame 


e Dear student, you can write texts as in the previous screen and the use of 
"Toolbox" on top right of the screen to insert the controls on the page. 


e Inserting the Form of window tools as follows: 


~ Form Controls 
& Advanced Button 
g Drop-Down Box 
Form 


Group Box 


input fields. Requires 
ZE code on the Web server 
ito process the input. 


E Input (Image) 


e The" Form " is used to pass or send all the form data in control tools of 


the Web browser to the WebServer. There are two ways to send the form 


data, namely: 


Tag Properties x <form method='GET'> = 


<form method="POST"> -Y 


Where we can adjust Method property with 


oF enctype multipart/form-data 


A acceptcharset the value POST or GET. 


A accesskey 
A atomicselection | 
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Some important differences between the values (POST) and (GET): 


GET POST 
Transmitted data appear in the "URL" Transmitted data do not appear in the 
page address. "URL" page address. 
They are not used to send secret or They are used to send secret or any 
any important data words. important data words. 
It has a limit of the data used up to Its Maximum data used is up to 8 Mb 
7607 Character symbols. 


Note: 
You will know how to use it in the second term 


If you look at the HTML code, you will find the beginning of the Form 


Tag as follows: 


<form mdthod='post' actjon="add_term.php' enctype="multipart/form—data'> 


From the previous formula, we find many of the properties of the Form where: 


- The " Method" property has two values: GET or POST. 

= The " Action" property : its value is the page name that we move to on 
clicking" Submit" button. 
Some texts expressing the values that are inserted into text boxes are like: 
The text "Ua oul!’ followed by text box to insert term name and so on with the 
rest to term data. The following Formula shows how to create text box in the 


internet browser. 


<input name = "text_term' type = "text' style = 'width : 482px'> 
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From the previous formula, notice the following: 
o "Input' means inserting "control" 
o name = 'text_term' means 'text_term". 
o "type = "text" meansthe text box type 
o ‘style = 'width : 482px" means set text box property. 
e Add" button is responsible for the implementation of the code to insert the 
new term data in a data record in the "dbdictionary" data base. 


e The rest of components page was put in another section <div> 
To preview the HTMLcode opposite "add term" page described in the 
previous screen Select Form, then cick the "Code" button at the bottom 


window , the program code of this section is diplayed as in the following 


screen: 


1 <html dir="rtl"> 
2 <head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
<title> gall) glaa Jiale /title> 

</head> 

<body dir="rtl"> 


3 
4 


(1) 


AddPHP code 


<div style="text-align:center" > <h1>qllawae Jàsk/h1></div> 
<form method="post" action="add_term.php" enctype="multipart/form-data"> 
<div class="style2"> 
<br> gna! Enbsp; &nbsp;&nbsp:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<input name="txt_term" type="text" style="width: 482px" > <br > 
<br> ia &nbsp; &nbsp;&nbsp;&nbsp;&nbsp:&nbsp;&nbsp;&nbsp;&nbsp; 
<input name="trans" type="text" style="width: 482px" > <br > 
<br> ghad ias nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;knbsp;knbsp; 
<textarea name="TextAreal" style="width: 480px; height: 30px"></textarea> <br/> 
<br> byyall&nbsp; &nbsp:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<input name="File1" style="width: 488px" type="file"> <br> <br/> 
<input name=" Submit1" style="width: 76px" type="submit" value="44ha|" ><br> <br > 
</div> 


(2) 


AddPHP code 
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Notice the folloeing code: 


o <form method="post" action="add_term.php" enctype="multipart/form-data’> 


Which includes the following three facts: 


<form method="post' It's data transfer from the model to 
the Server. 
" action="add_term.php" It is to determine the name of the 


page you want to go to (add 
term.php) when you click the 
Submit button. 


enctype—"multipart/form-data">| | It is used when they use the form to 
upload (photos) to the Server on 


the server, and if not used, 


images aren't uploaded within 


images "Pic" folder. 


(2) Writing PHP code: 


At this point, the term can enter add in the controls on the browser page, but 


data iazres not linked to the database, so we need to: 


e showi "Banner' and addresses of web pages at the beginning of the 
screen and through add your PHP code to insert 'Header' page in the 


place referred to the number (1) on the previous screen with the following 


code: 


<?php 


include("header.php"); 
> 


Figure (28) PHPcode to include Header page 


Computer & Information and Communication Technology 
Second year secondary 


Unit 3: Creating Site Pages acy 
“Illustrated Dictionary of computer terms" 


e Tconnect to the database. | 


je Verifiy typing data in the controls on the web page. 


le register term data in the database table through PHP code associated with 
the right "Add" in the place referred to the number( 2 ) on the previous screen 
with next code: 


<?php 


include("connection.php"); 
iffisset($. POST['Submit!'])) Conditional clause to 


check for pic folder 
if(is_dir('pic’)) { mkdir('pic'); } a“ created in case of non- 
| |5 @Sfile=$_FILES['File1']['name'] ; existence 
@Stmp=$_FILESŢ'File1']['tmp_name"]; 
; if(!empty($file)) { move_uploaded_file($tmp,'pic/'.$file);, } 
| 55 $term=$ POST['txt_term']; ; = A 
Strans=$ POST['trans']; It is conditional clause check ifwe 
| 57 $defe=$. POST['TextAreal’]; selected image file 
$picture="pic/" . $file . " "; 
if( $tem != "" && Strans ! |== "" && $defe !== "" && !empty($file) ) 


{ 
| mysql_query("SET NAMES 'utf8""); 
| $query=mysql_query("insert into terms values(",'$term','$trans','$defe','$picture')"); 
| 3 if($query) 
{ 


| ; $datares="zt= SUL dial ai", 
| echo("<label id='Labell' style='color: #FF0000; font-size: x-large;'> $datares </label> "); 
} 


else 


$datares=" uh Adal ai al" 
| ] echo("<label id='Label1' style='color: #FF0000;font-size: x-large;'> $datares </label> "); 
} 7 

73 } 
else 


$datares="J ial) = Jay aay inaua Jė ay a i ull". 
echo("<label id='Labell' style='color: #FF0000;font-size: x- large: "> $datares </label> "); 


| 7 } 


Figure ( 29) PHP code to add a new term 
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Dear Studen, see the detailed explanation of the code as follows: 


<?php 

-Includes the database connection page by the following code: 
include('connection.php'); 

Verify clicking the Submit button. 

-The following code checks if the user has clicked the "Add" 
button.First, we vertify that there is a folder named 'pic' which is 
assigned to hold images Inside, if this folder is not created,we create it. 
if (isset($_POST['Submit1'])) 

{ 


if (!is_dir(‘pic')) { mkdir(‘pic’); } 


-By the same way you can create other folders for images or videos, 
whether with the code or through Operating system in the project 


folder. 
Uploading image file in the server 


We assign file name chosen by the user File1 to $file variable, with a 
note that the mark@, Called Pointer which Php language deals with as a 


variable, and this does not show up an error message if its value empty. 
@$file=$_FILES['File1'] ['name']; 
@$tmp=$_FILES['File1'] ['tmp_name']; 


-Check whether the image file name is a not specific,the image file is 


loaded from the 'pic' folder. 
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if (!empty($file)) { move_uploaded_file($tmp,'up/’.$file); } 
Assign values in the variables controls 


-The data, entered in the text boxes for the new term on the web page 
in the following variables,is stored in the order of $ term - $ trans $ 
defe$ picture)), notcing that the $ _POST variable stores its controls on 
the form Form elements of values when you press the Submit button. 
$term=$_POST['txt_term']; 

$trans=$_POST['trans']; 

$defe=$_POST['TextAreal1']; 

$picture="pic/" . $file . " '; 


Verification of input values in the controls on the form Form elements 


-The following If statment shows that these variables are not null; some 
vales were assigned into them. If the condition is true and all variables 


aren't null, if ststment does the following: 


-The use of my sql_query function helps to show the data on a Web 
page in the Arabic; they don't appear in the form of question marks like 
if ($term !== " && $trans !== " && $defe !== " &&!empty($file) ) 

{ 
mysql_query ("SET NAMES baita 


$query=mysql_query('into terms values (",'$term','$trans','$defe",'$picture")') 


-We created e Lea variable for which we assign the value of ee the 


mysql_query function containing "insert statement " related to 


Computer & Information and Communication Technology 
Second year secondary 


Unit 3: Creating Site Pages 
“Illustrated Dictionary of computer terms" 


SQL language which will enter the data that are stored in the variables to the 


corresponding fields in the "terms" database table. 


-Then be sure to enter data in the database if $query, If this is done 
you will see the message "data have been inserted successfully’, 


otherwise the message "No one data have been provided." appears. 


if ($query) 

{ 

$datares="claiy cUl 442) 23’; 
echo('<label id='Label1" style='color: 


#FF0000;font-size: x—large;'> $datares</label> 


$datares="SULu) iual ais al’; 
echo('<label id='Label1" style='color: 
#FF0000;font-size: x—large;'> $datares 


</label> "); 
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-in case of not entering data to all fields or some of them, the message 


"the data entered are incorrect. "You must enter all fields", is displayed" 
{ 

$datares="(J géal) quer JAY Gay dagen nS AA ad a obit!" 

echo('<label id='Label1' style='color: 


#FF0000;font-size: x-large;'> $datares</label> Y 


Activity (9) 


"Create a Page Add Term.php" 


Dear student, 


Now you can use webpage as an interface to deal with 


the database table to add a new term, and do other 


operations, through your Activity 9 activity book Page 53 


Executing "Add term page" 


On browsing "enter term page" in the internet browser, the page appears and 


through the following address: 


localhost/dictionary/add_term.php 
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Figure (30) Window browse a page enter the term 


- If you do not enter data and you cick the "Add" button, the message "the 
data entered are incorrect.You must enter all fields,"is displayed belowt he 


the browser screen as follows: 


= -E — = = a < m Em) 
phe ë a ŘE 


| 
| A pra 
| 
| J aa) a = jas! > or > jŠ Js l] 4 PAN] 


a al ake 


Figure (31) Review page enter the term incomplete data window 
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- On adding all data terms as follows: 


— Eo) 


locathost-3080/dictionary/add_term.php -é E -pi zas Ue 


€] http 
f 
A 


[ Super Computer| ee 

| Pa Sine] as 

[A «as éo D> oS ete, SOT eis Do) : . 

e . gls gua ple far iyus GT Sliwl is. h| gina iaj 
Browse... C:\Users\Public\Pictures\Sample Pictures\super_computer jpg 3) pall 


Figure (32) window of inserting a term 


- By clicking the "Add" button, the message "data are successfully added" 


appears below the bottom of the browser screen. 


{v 


< 


Browse $ jali 


chy alali Aslicel 25 


> 


Figure (33) Window for ensuring to add the term correctly 
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(4)Be sure to add the term to the database 


To make sure that you insert data to a new record in the database, 
open the database in a new tab Internet browser by typing the following link 
‘localhost / phpmyadmin" in the address bar and make sure insert a new 


record in the "erms tabe: 


koa 
(€) Aa, http://localhost £080/phpmysdmin/tbi_ sction.php=PMAURL-O:tbl_row_acti O ~ © || 4) locathost8080 /127.0.01/... X 
| x Find: Previous Net [F Options >| 
i ; MM (Server 127 0.01 » @ Database: dbdictionary » {gf Table: terms aR 
phpMyAdmin a ® y> al 
Qazo g | Browse » Structure |J SQL » Search #¢ Insert «+ Export = Import V More 
Recent Favorites 
— 6 New wf Showing rows 0 - 0 (1 total, Query took 0.0010 seconds.) 
a cdcol 
- dbdictionary 
d New SELECT * FROM “terms 
t y terms 
EHN users [C] Profiling [ inline } { Edit } [ Explain SQL } [ Create PHP Code } { Refresh ] 
+) information_schema 
| y! ] Se. je 
* mysql Number of rows: 25 [v] Filter rows: Search this table 
| 
+: performance_schema 
+» phpmyadmin + Options 
da ca test -T v id term trans defe picture 
$ webauth ] J Edit $e Copy @ Delete 6 | Super Ja Wii pasing Lin dle CAS! 53 ia | pic/super_computer jpg 
Computer Dal! Janay 
t L] Check All With selected: gf Change © Delete a Export 
Number of rows: 25 |v} Filter rows: | Search this table 
Query results operations 
Print view & Print view (with full texts) = Export gj, Display chart +) Create view 
{v 
< > 


Figure (4) Window for ensuring to add the term in the database table 
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Goodbye 
See you in the 


second term 
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